<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <title>完善信息-协议</title>
    <link href="{{asset('vendor/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('css/buz/style.css')}}" />
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="{{asset('js/buz/jquery.min.js')}}"></script>
    <script src="{{asset('js/buz/commonLogin.js')}}"></script>
    <script src="{{asset('js/buz/ajaxfileupload.js')}}"></script>
    <script src="{{asset('vendor/bootstrap/js/bootstrapValidator.js')}}"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="{{asset('vendor/bootstrap/js/bootstrap.min.js')}}"></script>

    <!--[if lte IE 9]>
    <script type="text/javascript">
        window.location.href = "/ie";
    </script>
    <![endif]-->
</head>
<body class="bgwhite">
<div id="header">
    <div class="container-fluid">
        <div class="navbar row">
            <div class="navbar-header col-xs-5 col-sm-3 col-md-2">
                <a class="navbar-brand col-xs-12 col-sm-12 col-md-12" href="index.html">
                    <img src="{{asset('image/logo1.png')}}" class="right" width="150px" height="60px" style="margin-top:10px ;" />
                </a>
            </div>
            <nav class="top-nav col-xs-7 col-sm-9 col-md-10 padd">
                <div class="nav navbar-nav col-md-12 col-sm-12 col-xs-12 padd">
                    <div style="text-align: center; line-height: 77px; font-size: 18px; font-weight: bold;" class="col-md-11 col-xs-8">
                        实名认证
                    </div>
                    <div class="pull-right col-md-1  col-xs-4">
                        <i class="m-zhxx "></i>
                    </div>
                </div>

            </nav>
        </div>
    </div>
    <!-- Start .header-inner -->
</div>
<!--
        	作者：
        	时间：2017-11-22
        	描述：实名认证的信息进度条
        -->
<div class="info" style="margin-top: 80px;">
    <ul class="col-xs-12 col-ms-12 col-md-10 col-md-push-1" style="margin-top: 40px;">
        <li class="col-xs-4 col-ms-4 col-md-4">
            <cite class="circle bg5B">1</cite>
            <span class="line"></span>
        </li>
        <li class="col-xs-4 col-ms-4 col-md-4">
            <cite class="circle">2</cite>
            <span class="line"></span>
        </li>
        <li class="col-xs-4 col-ms-4 col-md-4">
            <cite class="circle">3</cite>
        </li>
    </ul>
    <ul class="col-xs-12 col-ms-12 col-md-10 col-md-push-1 mt20 textC">
        <li class="col-xs-4 col-ms-4 col-md-4 color5B">
            技术协议
        </li>
        <li class="col-xs-4 col-ms-4 col-md-4 color5B">
            基本信息
        </li>
        <li class="col-xs-4 col-ms-4 col-md-4 color5B">
            结算信息
        </li>
    </ul>
</div>
<div class="container padd mt20">
    <form class="form-horizontal" role="form" name="myForm" id="userInfo"  >

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">认证性质</label>
                    <div class="col-sm-8">
                        <label class="radio-inline">
                            <input type="radio" id="uncompany" name="property" value="0" disabled>个人
                        </label>
                        <label class="radio-inline">
                            <input type="radio" id="company" name="property" value="1" checked>企业
                        </label>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">商户性质</label>
                    <div class="col-sm-8">

                        <label class="radio-inline">
                            <input type="radio" name="role" value="0" checked>&nbsp;商户
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="role" value="1" disabled>&nbsp;代理
                        </label>

                    </div>
                </div>
            </div>
        </div>
        <hr />

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">真实姓名</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="realname" id="realname" value="">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">身份证号</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="idcard" id="idcard" value="">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">通讯地址</label>

                    <div class="col-sm-4">
                        <select class="form-control" id ="SelProvince" >
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <select class="form-control" id ="SelCity" name="city_id"  disabled>
                            <option value="" class="default">请选择市</option>
                        </select>
                    </div>

                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">经营范围</label>

                    <div class="col-sm-4">
                        <select class="form-control" id="SelBusiType" >
                            <option value="">请选择经营范围</option>
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <select class="form-control" id="SelBusiSubType" name="scope" disabled="disabled">
                            <option value="" class="default">请选择经营范围</option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">地址</label>
                    <div class="col-sm-8">
                        <input class="form-control" placeholder="请详细到镇、街道" id="address" name="address" value="" type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="row companyAttr">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">公司名称</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="enterprise" id="enterprise" value="" placeholder="请输入企业名称">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">营业执照号</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="license" id="license" value="" placeholder="请输入营业执照号">
                    </div>
                </div>
            </div>
            <input type="hidden" value="" name="img_tax" class="fileValue"/>
            <input type="hidden" value="" name="img_license" class="fileValue"/>
        </div>
        <input type="hidden" value="" name="img_id_hand" style="opacity: 0" class="fileValue"/>
        <input type="hidden" value="" name="img_id_front" class="fileValue"/>
        <input type="hidden" value="" name="img_id_back" class="fileValue"/>
        <input type="hidden" value="" name="img_permit" class="fileValue"/>
    </form>
    <hr>
    <div class="mage_div">
        <div class="row">
            <div class="col-sm-4" >
                <form method="post" enctype="multipart/form-data" id="img_id_hand_form">
                    <div class="y-upload-img yhy-popover" data-toggle="popover" data-placement="right"
                         data-content="<ul class='popover-width'><li>身份证上的<span class='text-danger'>所有信息清晰可见</span>，必须能<span class='text-danger'>看清证件号码</span>。</li><li>照片需免冠，建议未化妆，手持证见人的<span class='text-danger'>五官清晰可见</span>。</li><li>照片内容真实有效，不得做任何修改</li><li>支持<span class='text-danger'>.jpg .jpeg .bmp .gif</span>格式照片大小<span class='text-danger'>不超过2M</span></li></ul>">
                        <h1 class="y-mt60"><small>请选择文件</small></h1>
                        <img src="" class="upload-img"/>
                        <input type="file" value="" name="image" class="inputImg" id="img_id_hand"/>
                    </div>
                    <h4 class="y-fs16">手持身份证照片</h4>
                    <button type="button" class="btn btn-link" y-click="infopicone">示例图片</button>
                </form>

            </div>
            <div class="col-sm-4" >
                <form  method="post" enctype="multipart/form-data" id="img_id_front_form">
                    <div class="y-upload-img yhy-popover" data-toggle="popover" data-placement="right"
                         data-content="<ul class='popover-width'><li>身份证上的<span class='text-danger'>所有信息清晰可见</span>，必须能<span class='text-danger'>看清证件号码</span>。</li><li>照片需免冠，建议未化妆，手持证见人的<span class='text-danger'>五官清晰可见</span>。</li><li>照片内容真实有效，不得做任何修改</li><li>支持<span class='text-danger'>.jpg .jpeg .bmp .gif</span>格式照片大小<span class='text-danger'>不超过2M</span></li></ul>">
                        <h1 class="y-mt60"><small>请选择文件</small></h1>
                        <img src="" class="upload-img"/>
                        <input type="file" value="" name="image" class="inputImg" id="img_id_front"/>
                    </div>
                    <h4 class="y-fs16">身份证正面照</h4>

                    <button type="button" class="btn btn-link" y-click="infopicone">示例图片</button>
                </form>
            </div>

            <div class="col-sm-4" >
                <form method="post" enctype="multipart/form-data" id="img_id_back_form">
                    <div class="y-upload-img yhy-popover" data-toggle="popover" data-placement="right"
                         data-content="<ul class='popover-width'><li>身份证上的<span class='text-danger'>所有信息清晰可见</span>，必须能<span class='text-danger'>看清证件号码</span>。</li><li>照片需免冠，建议未化妆，手持证见人的<span class='text-danger'>五官清晰可见</span>。</li><li>照片内容真实有效，不得做任何修改</li><li>支持<span class='text-danger'>.jpg .jpeg .bmp .gif</span>格式照片大小<span class='text-danger'>不超过2M</span></li></ul>">
                        <h1 class="y-mt60"><small>请选择文件</small></h1>
                        <img src="" class="upload-img"/>
                        <input type="file" value="" name="image" class="inputImg" id="img_id_back"/>
                    </div>
                    <h4 class="y-fs16">身份证背面照</h4>
                    <button type="button" class="btn btn-link" y-click="infopicone">示例图片</button>
                </form>
            </div>

        </div>
        <div class="row" >
            <div class="col-sm-4 companyAttr" >
                <form  method="post" enctype="multipart/form-data" id="img_license_form">
                    <div class="y-upload-img yhy-popover" data-toggle="popover" data-placement="right"
                         data-content="<ul class='popover-width'><li>身份证上的<span class='text-danger'>所有信息清晰可见</span>，必须能<span class='text-danger'>看清证件号码</span>。</li><li>照片需免冠，建议未化妆，手持证见人的<span class='text-danger'>五官清晰可见</span>。</li><li>照片内容真实有效，不得做任何修改</li><li>支持<span class='text-danger'>.jpg .jpeg .bmp .gif</span>格式照片大小<span class='text-danger'>不超过2M</span></li></ul>">
                        <h1 class="y-mt60"><small>请选择文件</small></h1>
                        <img src="" class="upload-img"/>
                        <input type="file" value="" name="image" class="inputImg" id="img_license"/>
                    </div>
                    <h4 class="y-fs16">营业执证照</h4>
                    <button type="button" class="btn btn-link" y-click="infopicone">示例图片</button>
                </form>
            </div>
            <div class="col-sm-4 companyAttr" >
                <form  method="post" enctype="multipart/form-data" id="img_tax_form">
                    <div class="y-upload-img yhy-popover" data-toggle="popover" data-placement="right"
                         data-content="<ul class='popover-width'><li>身份证上的<span class='text-danger'>所有信息清晰可见</span>，必须能<span class='text-danger'>看清证件号码</span>。</li><li>照片需免冠，建议未化妆，手持证见人的<span class='text-danger'>五官清晰可见</span>。</li><li>照片内容真实有效，不得做任何修改</li><li>支持<span class='text-danger'>.jpg .jpeg .bmp .gif</span>格式照片大小<span class='text-danger'>不超过2M</span></li></ul>">
                        <h1 class="y-mt60"><small>请选择文件</small></h1>
                        <img src="" class="upload-img"/>
                        <input type="file" value="" name="image" class="inputImg" id="img_tax"/>
                    </div>
                    <h4 class="y-fs16">银行开户许可证照</h4>

                    <button type="button" class="btn btn-link" y-click="infopicone">示例图片</button>
                </form>
            </div>
            <div class="col-sm-4" >
                <form method="post" enctype="multipart/form-data" id="img_permit_form">
                    <div class="y-upload-img yhy-popover" data-toggle="popover" data-placement="right"
                         data-content="<ul class='popover-width'><li>身份证上的<span class='text-danger'>所有信息清晰可见</span>，必须能<span class='text-danger'>看清证件号码</span>。</li><li>照片需免冠，建议未化妆，手持证见人的<span class='text-danger'>五官清晰可见</span>。</li><li>照片内容真实有效，不得做任何修改</li><li>支持<span class='text-danger'>.jpg .jpeg .bmp .gif</span>格式照片大小<span class='text-danger'>不超过2M</span></li></ul>">
                        <h1 class="y-mt60"><small>请选择文件</small></h1>
                        <img src="" class="upload-img"/>
                        <input type="file" value="" name="image" class="inputImg" id="img_permit"/>
                    </div>
                    <h4 class="y-fs16">文网文文件(辅助文件，可不传)</h4>

                    <button type="button" class="btn btn-link" y-click="infopicone">示例图片</button>
                </form>
            </div>
        </div>

    </div>
    <hr/>
    <div class="row ">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="firstname" class="col-sm-3 control-label"></label>
                <div class="col-sm-8">
                    <button type="button" class="btn btn-primary"onclick="comfirmUserInfo()">下一步</button>
                </div>
            </div>
        </div>
    </div>
</div>
{{--警告弹窗--}}
<div class="modal fade in"  tabindex="-1" role="dialog" id="errorModel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h4 class="text-center"></h4>
            </div>
            <div class="modal-footer text-xs-center">
                <button type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="{{asset('js/buz/template-web.js')}}"></script>
<script id="provinceOption" type="text/html">
    @{{each data  value }}
    <option value="@{{ value.id}}">@{{ value.name}}</option>
    @{{/each}}
</script>
<script id="cityOption" type="text/html">
    @{{each data  value }}
    <option value="@{{ value.id}}">@{{ value.name}}</option>
    @{{/each}}
</script>

<script id="SelBusiTypeOption" type="text/html">
    @{{each data  value }}
    <option value="@{{ value.id}}">@{{ value.name}}</option>
    @{{/each}}
</script>
<script id="SelBusiSubTypeOption" type="text/html">
    @{{each data  value }}
    <option value="@{{ value.id}}">@{{ value.name}}</option>
    @{{/each}}
</script>
<script>
    $(".yhy-popover").popover({trigger:'hover',html:true});
    //个人、企业的差别显示
//    $("#uncompany").click(function(){
//        $(".companyAttr").hide();
////        $(".personAttr").show();
//    });
//    $("#company").click(function(){
//        $(".companyAttr").show();
////        $(".personAttr").hide();
//    });
    $('#userInfo').bootstrapValidator({
        message: '这个值没有被验证',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            property: {
                message: '不能为空',
                validators: {
                    notEmpty: {
                        message: '不能为空'
                    }

                }
            },
            role: {
                message: '不能为空',
                validators: {
                    notEmpty: {
                        message: '不能为空'
                    }
                }
            },
            realname: {
                message: '真实姓名不能为空',
                validators: {
                    notEmpty: {
                        message: '真实姓名不能为空'
                    }
                }
            },
            idcard: {
                message: '身份证号不能为空',
                validators: {
                    notEmpty: {
                        message: '身份证号不能为空'
                    }
                }
            },
            city_id: {
                message: '省市不能为空',
                validators: {
                    notEmpty: {
                        message: '省市不能为空'
                    }
                }
            },
            scope: {
                message: '经营范围不能为空',
                validators: {
                    notEmpty: {
                        message: '经营范围不能为空'
                    }
                }
            },
            address: {
                message: '地址不能为空',
                validators: {
                    notEmpty: {
                        message: '地址不能为空'
                    }
                }
            },
            enterprise: {
                message: '公司名称不能为空',
                validators: {
                    notEmpty: {
                        message: '公司名称不能为空'
                    }
                }
            },
            license: {
                message: '营业执照号不能为空',
                validators: {
                    notEmpty: {
                        message: '营业执照号不能为空'
                    }
                }
            },
//            img_id_hand: {
//                message: '手持身份证照不能为空',
//                validators: {
//                    notEmpty: {
//                        message: '手持身份证照不能为空'
//                    }
//                }
//            },
//            img_id_front: {
//                message: '身份证正面照不能为空',
//                validators: {
//                    notEmpty: {
//                        message: '身份证正面照不能为空'
//                    }
//                }
//            },
//            img_id_back: {
//                message: '身份证背面照不能为空',
//                validators: {
//                    notEmpty: {
//                        message: '身份证背面照不能为空'
//                    }
//                }
//            },
//            img_license: {
//                message: '营业执照号不能为空',
//                validators: {
//                    notEmpty: {
//                        message: '营业执照号不能为空'
//                    }
//                }
//            },
//            img_tax: {
//                message: '税务许可证不能为空',
//                validators: {
//                    notEmpty: {
//                        message: '税务许可证不能为空'
//                    }
//                }
//            }
        }
    });
    function   checkImgUpload() {
        var propertyVal = $("input[name='property']").val();
        var img_id_hand = $("input[name='img_id_hand']").val();
        var img_id_front = $("input[name='img_id_front']").val();
        var img_id_back = $("input[name='img_id_back']").val();
        var img_license = $("input[name='img_license']").val();
        var img_tax = $("input[name='img_tax']").val();
        if(img_id_hand== ''){showMsg('手持身份证照不能为空');return false;}
        if(img_id_front== ''){showMsg('身份证正面照不能为空');return false;}
        if(img_id_back== ''){showMsg('身份证背面照不能为空');return false;}
        if(propertyVal==1){
            if(img_license== ''){showMsg('营业执照号不能为空');return false;}
            if(img_tax== ''){showMsg('税务许可证不能为空');return false;}
        }
        return true;
    }
    //信息提交
    function comfirmUserInfo() {
        var bootstrapValidator = $('#userInfo').data("bootstrapValidator");
        bootstrapValidator.validate();
        if(bootstrapValidator.isValid() && checkImgUpload()){
            var data = $("#userInfo").serialize();
            console.log(data);
            $.ajax({
                url: "/api/profile/base",
                data: data,
                type: 'post',
                success:function(data){
                    console.log(data);
                    if(filterAjaxData(data)){
                        window.location.href="/auth/remit";
//                    }else {
//                        showMsg(data.message);
                    }

                }

            });
        }
    }

    $(function () {
        //上传图片
        $(".inputImg").on("change",function () {
            var that = $(this);
            var _id = that.prop("id");
            console.log(_id)
            var formId = that.parents("form").prop("id");
            console.log(formId);
            var formData = new FormData($("#" + formId)[0]);
            $.ajax({
                type: "post",
                url: "/api/tool/imageUpload",
                data: formData,
                contentType: false, //必须
                processData: false, //必须
                success: function (data) {
                    if (filterAjaxData(data)) {
                        //给对应的input表单赋值
                        $("input[name='" + _id + "']").val(data.data.path);
                        //显示图片
                        that.parent('.y-upload-img').find("img.upload-img").attr("src", data.data.path);
                    } else {
                        showMsg(data.message);

                    }
                },
                dataType: "json"
            });
        });

        //初始化省
        $.ajax({
            url: "/api/tool/cities",
            type: 'get',
            success: function (data) {
                if (filterAjaxData(data)) {
                    console.log(data);
                    var provinceHtml = template('provinceOption', data);
                    $("#SelProvince").append(provinceHtml);

                } else {
                    showMsg(data.message);
                }
            }
        });
        //选择市
        $("#SelProvince").change(function () {
            var _id = $(this).val();

            console.log(_id);
            $.ajax({
                url: "/api/tool/cities?parent=" + _id,
                type: 'get',
                success: function (data) {
                    if (filterAjaxData(data)) {
                        console.log(data);
                        $("#SelCity").attr("disabled", false);
                        var cityHtml = template('cityOption', data);
                        $("#SelCity .default").siblings().remove();
                        $("#SelCity").append(cityHtml);

                    } else {
                        showMsg(data.message);
                    }
                }
            })
        });


        //初始化经营范围
        $.ajax({
            url: "/api/tool/scopes",
            type: 'get',
            success: function (data) {
                if (filterAjaxData(data)) {
                    console.log(data);
                    var SelBusiTypeHtml = template('SelBusiTypeOption', data);
                    $("#SelBusiType").append(SelBusiTypeHtml);

                } else {
                    showMsg(data.message);
                }
            }


        });
        //选择经营范围
        $("#SelBusiType").change(function () {
            var _id = $(this).val();

            console.log(_id);
            $.ajax({
                url: "/api/tool/scopes?parent=" + _id,
                type: 'get',
                success: function (data) {
                    if (filterAjaxData(data)) {
                        console.log(data);
                        $("#SelBusiSubType").attr("disabled", false);
                        var SelBusiSubTypeHtml = template('SelBusiSubTypeOption', data);
                        $("#SelBusiSubType .default").siblings().remove();
                        $("#SelBusiSubType").append(SelBusiSubTypeHtml);

                    } else {
                        showMsg(data.message);
                    }
                }
            })
        });

    });
    //	计算line的宽度
    var width=$(".line").width();
    var left=$(".circle").position().left;
    $(".line").css({"width":(width-40)+"px"});
    $(".line").css({"left":(left+40)+"px"});
</script>
</body>



</html>
